import { FC, useCallback, useEffect, useState } from 'react';
import logoUrl from "../../assets/logo.svg";
import './index.css';

interface IProps {
  onSetting?: () => void;
}

const IndexPage: FC<IProps> = ({ onSetting }) => {
  const [count, setCount] = useState(0);

  const handleClick = useCallback(() => {
    setCount(prev => prev + 1);
  }, []);

  useEffect(() => {
    if (count <= 0) {
      return;
    }

    if (count >= 3) {
      onSetting?.();
    }

    const timer = setTimeout(() => {
      setCount(0);
    }, 1000);

    return () => {
      clearTimeout(timer);
    }
  }, [count]);

  return (
    <div className="index-page">
      <img className="logo" src={logoUrl} onClick={handleClick} />
      <h1 className="name">启蒙教学（言蹊计划）</h1>
      <div className="version">V0.0.2</div>
    </div>
  );
}

export default IndexPage;